<template>
    <!-- <div id="map" style="height:1500px;width: 1000px;"></div> -->
    <div id="map" style="width: 100%;height:100%"></div>

    <div id="popup" class="ol-popup">
        <div id="popup-content"></div>
    </div>

</template>

<script setup>
// import Map from 'ol/Map';
// import View from 'ol/View';
// import TileLayer from 'ol/layer/Tile';
// import * as control from 'ol/control';
// import { Logo, TileSuperMapRest } from '@supermap/iclient-ol';

// onMounted(() => {

//     nextTick(() => {
//         var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
//         var mapp = new Map({
//             target: 'map',
//             controls: control.defaults({ attributionOptions: { collapsed: false } }).extend([new Logo()]),
//             view: new View({
//                 center: [106.86, 39.71],
//                 // maxZoom: 18,
//                 // minZoom: 2,
//                 zoom: 5,
//                 projection: 'EPSG:4326',
//             })
//         });
//         var layer = new TileLayer({
//             source: new TileSuperMapRest({
//                 url: url,
//                 wrapX: true
//             }),
//             projection: 'EPSG:4326'
//         });
//         mapp.addLayer(layer);
//     });

// })



// var map, startMarker, endMarker, container, content, tempMarker,
//         stopSourceLayer, roadSourceLayer, tempMarkerSourceLayer, tempRedSourceLayer,
//         info, paths = {transSolutions: null, solutions: null},
//         baseUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-changchun/rest/maps/长春市区图",
//         serviceUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/traffictransferanalyst-sample/restjsr/traffictransferanalyst/Traffic-Changchun";
//     var extent = [48.4, -7668.25, 8958.85, -55.58];
//     var projection = new ol.proj.Projection({
//         code:'',
//         extent: extent,
//         units: 'm'
//     });
//     new ol.supermap.MapService(baseUrl).getMapInfo(function (serviceResult) {
//         var mapJSONObj = serviceResult.result;
//         map = new ol.Map({
//             target: 'map',
//             controls: ol.control.defaults({attributionOptions: {collapsed: false}})
//                 .extend([new ol.supermap.control.Logo({ link: "https://iclient.supermap.io" })]),
//             view: new ol.View({
//                 center: [4700, -3600],
//                 zoom: 2,
//                 projection: projection,
//                 multiWorld: true
//             })
//         });
//         var options = ol.source.TileSuperMapRest.optionsFromMapJSON(baseUrl, mapJSONObj);
//         var layer = new ol.layer.Tile({
//             source: new ol.source.TileSuperMapRest(options)
//         });
//         stopSourceLayer = new ol.source.Vector();
//         roadSourceLayer = new ol.source.Vector();
//         tempRedSourceLayer = new ol.source.Vector();
//         tempMarkerSourceLayer = new ol.source.Vector();
//         map.addLayer(layer);

//         //设置起始、终止点并添加到地图上
//         startMarker = new ol.Overlay({
//             element: document.getElementById('startMarker'),
//             positioning: 'center-center',
//             position: [3111.42533851, -5527.73795456]
//         });
//         endMarker = new ol.Overlay({
//             element: document.getElementById('endMarker'),
//             positioning: 'center-center',
//             position: [6055.3431955, -4270.0725196]
//         });
//         map.addOverlay(startMarker);
//         map.addOverlay(endMarker);
//         initResultInfoWin();
//         execTransSolutionsQuery('LESS_TIME');  //交通换乘的有4种方式:'LESS_TIME','MIN_DISTANCE','LESS_WALK','LESS_TRANSFER'
//     });

//     function initResultInfoWin() {
//         container = document.getElementById('popup');
//         content = document.getElementById('popup-content');
//         info = new ol.control.Control({element: container});
//         info.setMap(map);
//         info.update = function (transSolutions, transGuide) {
//             if (!transSolutions) {
//                 return;
//             }
//             var solution, lines, line, dispStatus = "block";
//             $("<div class='panel-heading' style='background:steelblue;color: honeydew'>" + resources.text_startPoint + "：" + "省汽修&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + resources.text_endPoint + "：" + "中安大厦<br/>" + resources.text_trafficTransferScheme + "（" + resources.text_minTime + "）</div>").appendTo(content);
//             for (var i = 0, iLen = transSolutions.length; i < iLen; i++) {
//                 solution = transSolutions[i];
//                 //显示方案头
//                 var title = "";
//                 for (var ii = 0, iiLen = solution.linesItems.length; ii < iiLen; ii++) {
//                     lines = solution.linesItems[ii];
//                     for (var iii = 0, iiiLen = lines.lineItems.length; iii < iiiLen; iii++) {
//                         line = lines.lineItems[iii];
//                         if (iii !== iiiLen - 1) {
//                             title += line.lineName + "/";
//                         } else {
//                             title += line.lineName;
//                         }
//                     }
//                     if (ii !== iiLen - 1) {
//                         title += " → ";
//                     }
//                 }
//                 $("<div class='transferSolution' id='transferSolution-" + i + "'><span class='transferIndex'>" + resources.text_scheme + (i + 1) + "：</span>" + title + "</div>").appendTo(content);
//                 if (i !== 0) {
//                     dispStatus = "none";
//                 }
//                 var list = $("<div class='transferInfo' id='transferInfo-" + i + "' style='display:" + dispStatus + "'></div>");
//                 list.appendTo(content);
//                 //默认显示方案1下的table
//                 if (i === 0) {
//                     fillTransferInfo(transGuide, transSolutions, 0).appendTo(list);
//                     setPopup();
//                 }
//             }
//             //点击方案时显示对应的table
//             bindSolutionsClickEvent();
//         };
//         map.addControl(info);
//     }

//     function execTransSolutionsQuery(tactic) {
//         paths.points = [26, 180];
//         var params = new ol.supermap.TransferSolutionParameters({
//             solutionCount: 6,        //最大换乘导引数量
//             transferTactic: tactic,  //公交换乘策略类型
//             walkingRatio: 10,        //步行与公交的消耗权重比
//             points: paths.points     //起始点坐标
//         });
//         new ol.supermap.TrafficTransferAnalystService(serviceUrl)
//             .analysisTransferSolution(params, function (serviceResult) {
//                 transferSolutionsSucceed(serviceResult.result);
//             });
//     }

//     function transferSolutionsSucceed(result) {
//         clearLayer();
//         //在地图上叠加符号信息
//         var transGuide = result.defaultGuide,
//             transSolutions = result.solutionItems,
//             solutions = [];
//         for (var j = 0; j < transSolutions.length; j++) {
//             var linesItems = transSolutions[j].linesItems, transSolution = [];
//             for (var jj = 0; jj < linesItems.length; jj++) {
//                 var lineItems = linesItems[jj].lineItems, items = [];
//                 for (var jjj = 0; jjj < lineItems.length; jjj++) {
//                     var lineItem = lineItems[jjj];
//                     items.push(lineItem
//                     );
//                 }
//                 transSolution.push(items);
//             }
//             solutions.push(transSolution);
//         }
//         paths["transSolutions"] = transSolutions;
//         paths["solutions"] = solutions;
//         if (!transGuide || !transSolutions) return;
//         info.update(transSolutions, transGuide);
//     }

//     function fillTransferInfo(transGuide, transSolutions, indexX) {
//         clearLayer();
//         //在地图上显示路线
//         if (transGuide && transGuide.items.length) {
//             var items = transGuide.items;
//             for (var itemIndex = 0, itemLen = items.length; itemIndex < itemLen; itemIndex++) {
//                 var geometry = items[itemIndex].route;
//                 var pointsList = [];
//                 for (var k = 0; k < geometry.points.length; k++) {
//                     pointsList.push([geometry.points[k].x, geometry.points[k].y]);
//                 }
//                 var roadLine = new ol.geom.LineString(pointsList);
//                 roadSourceLayer.addFeatures([new ol.Feature(roadLine)]);
//                 var roadResultLayer = new ol.layer.Vector({
//                     source: roadSourceLayer,
//                     style: new ol.style.Style({
//                         stroke: new ol.style.Stroke({
//                             color: 'dodgerblue',
//                             width: 3
//                         })
//                     })
//                 });
//                 map.addLayer(roadResultLayer);
//             }
//         }
//         var table = $("<table id='trafficRes' border='1'></table>");
//         var startStop = $("<tr></tr>");
//         $("<td colspan='2'><span class='busLink bgSpan'><span style='display:none'>" + transGuide.items[0].startPosition.x + "," + transGuide.items[0].startPosition.y + "</span>" + transGuide.items[0].startStopName + "</span></td>").appendTo(startStop);
//         startStop.appendTo(table);
//         var indexY = 0;
//         for (var m = 0, mLen = transGuide.items.length; m < mLen; m++) {
//             var item = transGuide.items[m];
//             var tr2 = $("<tr></tr>");
//             if (item.isWalking) {
//                 $("<td>" + resources.text_walkTO + "<a class='busLink'><span style='display:none'>" + item.endPosition.x + "," + item.endPosition.y + "</span>" + item.endStopName + "</a></td>").appendTo(tr2);
//                 $("<td>" + parseInt(item.distance) + resources.msg_m + "</td>").appendTo(tr2);
//             } else {
//                 var otherLines = transSolutions[indexX].linesItems[indexY],
//                     links = "";
//                 if (otherLines && otherLines.lineItems.length > 1) {
//                     links = "</br>" + resources.text_alsoRide;
//                     for (var oti = 0, otLen = otherLines.lineItems.length; oti < otLen; oti++) {
//                         var line = otherLines.lineItems[oti];
//                         if (item.lineName !== line.lineName) {
//                             var other = indexX + "," + indexY + "," + oti + ",0";
//                             links += "<a class='busLink'><span style='display:none'>" + other + "</span>" + line.lineName + "</a>";
//                         }
//                     }
//                 }
//                 var points = item.route.points, pointStr = "";
//                 for (var i = 0; i < points.length; i++) {
//                     pointStr += points[i].x + " " + points[i].y;
//                     if (i != points.length - 1) {
//                         pointStr += ",";
//                     }
//                 }
//                 $("<td>" + resources.text_ride + "<a class='busLink'>" + item.lineName + "<span style='display:none'>" + pointStr + "</span></a>" + resources.text_debus1 + "<a class='busLink'><span style='display:none'>" + item.endPosition.x + "," + item.endPosition.y + "</span>" + item.endStopName + "</a>" + resources.text_debus2 + links + "</td>").appendTo(tr2);
//                 $("<td>" + item.passStopCount + resources.text_stops + "</td>").appendTo(tr2);
//                 indexY++;
//             }
//             tr2.appendTo(table);
//         }
//         var endStop = $("<tr></tr>");
//         endStop.appendTo(table);
//         $("<td colspan='2'><span class='busLink bgSpan'><span style='display:none'>" + transGuide.items[transGuide.items.length - 1].endPosition.x + "," + transGuide.items[transGuide.items.length - 1].endPosition.y + "</span>" + transGuide.items[transGuide.items.length - 1].endStopName + "</span></td>").appendTo(endStop);
//         return table;
//     }

//     function bindSolutionsClickEvent() {
//         for (var i = 0; i < 6; i++) {
//             $("#transferSolution-" + i).click(toggleGuideItems);
//         }

//         function toggleGuideItems(e) {
//             for (var j = 0; j < 6; j++) {
//                 $("#transferInfo-" + j).hide(500);
//             }
//             var id = parseInt(e.currentTarget.id.split("-")[1]);
//             $("#transferInfo-" + id).show(500);
//             //构造传入iServer服务器的transferLines
//             var transLines = [];
//             for (var i = 0; i < paths.solutions[id].length; i++) {
//                 var trans = paths.solutions[id][i][0];
//                 transLines.push(trans);
//             }
//             execTransPathQuery(id, transLines);
//         }
//     }

//     //在popup里点击每个站点、交通路线时，在地图上对应显示并进行强调
//     function setPopup() {
//         $(".busLink").click(function () {
//             if (tempMarkerSourceLayer) {
//                 tempMarkerSourceLayer.clear();
//             }
//             if (tempRedSourceLayer) {
//                 tempRedSourceLayer.clear();
//             }
//             var points = this.children[0].innerText.split(",");
//             //添加换乘点的marker
//             if (points.length === 2) {
//                 tempMarker = new ol.geom.Point([points[0], points[1]]);
//                 var iconStyle_marker = new ol.style.Style({
//                     image: new ol.style.Icon(({
//                         src: '../img/marker.png',
//                         anchor: [0.5, 1]
//                     }))
//                 });
//                 var tempMarkerFeature = new ol.Feature(tempMarker);
//                 tempMarkerFeature.setStyle(iconStyle_marker);
//                 tempMarkerSourceLayer.addFeatures([tempMarkerFeature]);
//                 var markerLayer = new ol.layer.Vector({
//                     source: tempMarkerSourceLayer
//                 });
//                 map.addLayer(markerLayer);
//                 var coords = tempMarker.getCoordinates();
//                 map.getView().setCenter([parseInt(coords[0]), parseInt(coords[1])]);
//                 map.getView().setZoom(3)
//             } else if (points.length === 4 && points[3] === "0") {
//                 var linesItems = paths["solutions"][points[0]], lineStr = "[";
//                 for (var i = 0; i < linesItems.length; i++) {
//                     var lineItem = linesItems[i][0], j = parseInt(points[1]);
//                     if (i !== j) {
//                         lineStr += lineItem;
//                     } else if (i === j) {
//                         lineItem = linesItems[points[1]][points[2]];
//                         lineStr += lineItem;
//                     }
//                     if (i !== linesItems.length - 1) {
//                         lineStr += ",";
//                     }
//                 }
//                 lineStr += "]";
//                 $("#transferInfo-" + points[0]).hide(500);
//                 execTransPathQuery(points[0], lineStr);
//                 $("#transferInfo-" + points[0]).show(500);
//             } else {
//                 var linePoints = [];
//                 for (var i = 0; i < points.length; i++) {
//                     var arr = points[i].split(" ");
//                     var point = [parseInt(arr[0]), parseInt(arr[1])];
//                     linePoints.push(point);
//                 }
//                 var lineString = new ol.geom.LineString(linePoints);
//                 tempRedSourceLayer.addFeatures([new ol.Feature(lineString)]);
//                 var tempRedLayer = new ol.layer.Vector({
//                     source: tempRedSourceLayer,
//                     style: new ol.style.Style({
//                         stroke: new ol.style.Stroke({
//                             color: 'red',
//                             width: 6
//                         })
//                     })
//                 });
//                 map.addLayer(tempRedLayer);
//                 //设置线路中心
//                 var lineCenter = [];
//                 if ((linePoints.length) % 2 == 0) {
//                     lineCenter = [linePoints[linePoints.length / 2][0], linePoints[linePoints.length / 2][1]];
//                     map.getView().setCenter([parseInt(lineCenter[0]), parseInt(lineCenter[1])]);
//                 } else {
//                     lineCenter = [linePoints[(linePoints.length + 1) / 2][0], linePoints[(linePoints.length + 1) / 2][1]];
//                     map.getView().setCenter([parseInt(lineCenter[0]), parseInt(lineCenter[1])]);
//                 }
//                 map.getView().setZoom(3);
//             }
//         });
//     }

//     function execTransPathQuery(id, transLines) {
//         var params = new ol.supermap.TransferPathParameters({
//             points: paths["points"],
//             transferLines: transLines
//         });
//         new ol.supermap.TrafficTransferAnalystService(serviceUrl)
//             .analysisTransferPath(params).then(function (serviceResult) {
//                 $("#transferInfo-" + id).empty();
//                 var transGuide = serviceResult.result;
//                 transSolutions = paths["transSolutions"];
//                 map.getView().setCenter([4700, -3600]);
//                 map.getView().setZoom(2);
//                 fillTransferInfo(transGuide, transSolutions, id).appendTo($("#transferInfo-" + id));
//                 setPopup();
//             });
//     }

//     function clearLayer() {
//         if (roadSourceLayer) {
//             roadSourceLayer.clear();
//         }
//         if (tempMarkerSourceLayer) {
//             tempMarkerSourceLayer.clear();
//         }
//         if (tempRedSourceLayer) {
//             tempRedSourceLayer.clear();
//         }
//     }

</script>

<style lang='scss' scoped>
.transferSolution {
    cursor: pointer;
    margin: 10px 10px;
}

.transferInfo a {
    cursor: pointer;
}

table {
    width: 90%;
}

#trafficRes {
    margin: 5px;
}

.ol-popup {
    position: absolute;
    background-color: white;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    border-radius: 5px;
    border: 1px solid #cccccc;
    top: 0;
    right: 0;
    min-width: 280px;
}
</style>